﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="New.aspx.cs" Inherits="MonkeyWarranty.Web.InstantTickets.New" %>
<%@ Import Namespace="Resources" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <title>
        <%=GlobalStrings.InstantTickets %></title>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <div class="row">
        <div class="col-lg-12">
            <h3><%=GlobalStrings.InstantTicketForm %> - <%=GlobalStrings.InstantTickets %></h3>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="alert alert-danger" runat="server" id="errorMessage" visible="False">
                <label class="control-label">
                    <asp:Literal ID="lblErrorMessage" runat="server"></asp:Literal></label>
            </div>
        </div>
    </div>
    
    <!-- Customer -->
    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <%=GlobalStrings.Customers %>
                </div>
                <div class="panel-body">
                    <asp:HiddenField ID="hidCustomerId" runat="server" />
                    <div class="col-lg-12">
                        <div class="form-group">
                            <label class="radio-inline">
                                <asp:RadioButton ID="rbtNewCustomer" runat="server" GroupName="customer" Checked="True" /><%=GlobalStrings.NewCustomer%></label>
                            <label class="radio-inline">
                                <asp:RadioButton ID="rbtSelectCustomer" runat="server" GroupName="customer" data-toggle="modal" data-target="#customerModal" /><%=GlobalStrings.ExistingCustomer %></label>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label><%=GlobalStrings.Name%></label>
                            <asp:TextBox ID="txtName" runat="server" CssClass="form-control"></asp:TextBox>
                        </div>
                        <div class="form-group">
                            <label><%=GlobalStrings.Address%></label>
                            <asp:TextBox ID="txtAddress" runat="server" CssClass="form-control"></asp:TextBox>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label><%=GlobalStrings.Phone%></label>
                            <asp:TextBox ID="txtPhone" runat="server" CssClass="form-control"></asp:TextBox>
                        </div>
                        <div class="form-group">
                            <label><%=GlobalStrings.Email%></label>
                            <asp:TextBox ID="txtEmail" runat="server" CssClass="form-control"></asp:TextBox>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Customer Modal -->
    <div class="modal fade" id="customerModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" style="width: 800px; height: 400px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel"><%=GlobalStrings.CustomersList %></h4>
                </div>
                <div class="modal-body">
                    <div class="form-inline">
                        <input class="form-control" type="text" id="name" placeholder="<%=GlobalStrings.Name %>" />
                        <%=GlobalStrings.CustomerGroups %>:
                        <asp:DropDownList ID="ddlCustomerGroups" runat="server" CssClass="form-control"></asp:DropDownList>
                        <button class="btn btn-default" type="button" id="LoadRecordsButton"><i class="fa fa-search"></i></button>
                        <button class="btn btn-default" type="button" id="ResetButton"><i class="fa fa-refresh"></i></button>
                    </div>
                    <p></p>
                    <div id="CustomersTableContainer"></div>
                    <p></p>
                    <a class="btn btn-success" href="../Customers/New.aspx" target="_blank"><%=GlobalStrings.AddNew %></a>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->

    <!-- End Customer -->

    <!-- Common information -->
    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <%=GlobalStrings.Information %>
                </div>
                <div class="panel-body">
                    <div class="col-lg-12">
                        <div class="form-group">
                            <label><%=GlobalStrings.TicketNumber %></label><br />
                            <asp:TextBox ID="txtCodePrefix" runat="server" Enabled="False" Text="TN" CssClass="codeprefix"></asp:TextBox>
                            - 
                            <asp:TextBox ID="txtCode" runat="server" Enabled="False" CssClass="codeprefix"></asp:TextBox>
                        </div>
                    </div>
                    <div class="col-lg-12">
                        <div class="form-group">
                            <label><%=GlobalStrings.InstantTicketContent %></label>
                            <asp:TextBox ID="txtContent" runat="server" CssClass="form-control"></asp:TextBox>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="form-group">
                            <label><%=GlobalStrings.ReceivedDate %></label><br />
                            <asp:TextBox ID="txtReceivedDate" runat="server"></asp:TextBox>
                        </div>
                    </div>
                    <%--<div class="col-lg-4">
                        <div class="form-group">
                            <label><%=GlobalStrings.ReceivedEmployee %></label><br/>
                            <asp:DropDownList ID="ddlEmployees" runat="server"></asp:DropDownList>
                        </div>
                    </div>--%>
                    <div class="col-lg-4">
                        <div class="form-group">
                            <label><%=GlobalStrings.Distance %></label><br/>
                            <asp:TextBox ID="txtDistance" runat="server"></asp:TextBox> (km)
                        </div>
                    </div>
                    
                    <div class="col-lg-12">
                        <div class="form-group">
                            <label><%=GlobalStrings.Description %></label>
                            <asp:TextBox ID="txtDescription" runat="server" TextMode="MultiLine" CssClass="form-control"></asp:TextBox>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="row" style="margin-bottom: 150px;">
        <div class="col-lg-12">
            <p></p>
            <asp:Button ID="btnSave" runat="server"
                Text="<%$ Resources:GlobalStrings, Save %>" CssClass="btn btn-primary" Width="100px"
                OnClick="btnSave_Click" />
            <a class="btn btn-default" href="List.aspx"><%=GlobalStrings.Cancel %></a>
        </div>
    </div>
    

    
    <script type="text/javascript">
        $(function () {
            $("#menu-instant").addClass("active");
            $("#menu1-instant").addClass("collapse in");
            $("#instant-ticket").addClass("active");

            $("#<%=txtReceivedDate.ClientID %>").calendar();
            $("#tabs").tabs();

            $("#dialog:ui-dialog").dialog("destroy");
            $("#customers-dialog-form").dialog({
                autoOpen: false,
                height: 400,
                width: 800,
                modal: true
            });

            $("#<%=rbtNewCustomer.ClientID %>").click(function () {
                NewCustomer();
            });
            $("#<%=rbtSelectCustomer.ClientID %>").click(function () {
                SelectCustomer();
            });
        });

        //Prepare jtable plugin
        $('#CustomersTableContainer').jtable({
            //title: '<%=GlobalStrings.CustomersList %>',
            paging: true,
            pageSize: 10,
            sorting: true,
            defaultSorting: 'Name ASC',
            actions: {
                listAction: '../Customers/List.aspx/CustomerListByFilter'
            //createAction: 'List.aspx/CreateCustomer',
            //updateAction: 'List.aspx/UpdateCustomer',
            //deleteAction: 'List.aspx/DeleteCustomer'
            },
            fields: {
                Id: {
                    key: true,
                    create: false,
                    edit: false,
                    list: false
                },
                Code: {
                    title: '<%=GlobalStrings.Code %>',
                    //defaultValue: 'KH',
                    //inputClass: 'validate[required]',
                    list: false
                },
                Name: {
                    title: '<%=GlobalStrings.Name %>',
                    width: '20%',
                    //inputClass: 'validate[required]'
                    display: function (data) {
                        return '<a href="javascript:void(0);" data-dismiss="modal" onclick="javascript:CustomerSelect({Id:' + data.record.Id +
                            ',Name:\'' + data.record.Name + '\'' +
                                ',Phone:\'' + data.record.Phone + '\'' +
                                    ',Email:\'' + data.record.Email + '\'' +
                                        ',Address:\'' + data.record.Address + '\'' +
                                            '});">' + data.record.Name + '</a>';
                    }
                },
                Phone: { title: '<%=GlobalStrings.Phone %>', sorting: false },
                Email: { title: '<%=GlobalStrings.Email %>', sorting: false },
                Address: { title: '<%=GlobalStrings.Address %>', sorting: false }
            }
        });

        //Re-load records when user click 'load records' button.
        $('#LoadRecordsButton').click(function (e) {
            e.preventDefault();
            $('#CustomersTableContainer').jtable('load', {
                name: $('#name').val(),
                customerGroupId: $('#<% = ddlCustomerGroups.ClientID %>').val()
            });
        });

        // enters
        $('#name').keypress(function (e) {
            if (e.which == 13) {
                e.preventDefault();
                $('#LoadRecordsButton').click();
            }
        });

        //Load all records when page is first shown
        //$('#LoadRecordsButton').click();
    </script>
    
    <script type="text/javascript">
        function CustomerSelect(customer) {
            $("#customers-dialog-form").dialog("close");
            //console.debug(customer);
            $("#<%=hidCustomerId.ClientID %>").val(customer.Id);
            $("#<%=txtName.ClientID %>").val(customer.Name);
            $("#<%=txtAddress.ClientID %>").val(customer.Address);
            $("#<%=txtPhone.ClientID %>").val(customer.Phone);
            $("#<%=txtEmail.ClientID %>").val(customer.Email);
        }
        
        function NewCustomer() {
            //$("#customers-dialog-form").dialog("close");
            $("#<%=txtName.ClientID %>").prop("disabled", false);
            $("#<%=txtAddress.ClientID %>").prop("disabled", false);
            $("#<%=txtPhone.ClientID %>").prop("disabled", false);
            $("#<%=txtEmail.ClientID %>").prop("disabled", false);
            $("#<%=txtName.ClientID %>").val('');
            $("#<%=txtAddress.ClientID %>").val('');
            $("#<%=txtPhone.ClientID %>").val('');
            $("#<%=txtEmail.ClientID %>").val('');
            $("#<%=txtName.ClientID %>").focus();
        }

        function SelectCustomer() {
            $("#<%=hidCustomerId.ClientID %>").val(0);
            $("#<%=txtName.ClientID %>").val('');
            $("#<%=txtAddress.ClientID %>").val('');
            $("#<%=txtPhone.ClientID %>").val('');
            $("#<%=txtEmail.ClientID %>").val('');
            // read only customer data
            $("#<%=txtName.ClientID %>").prop("disabled", true);
            $("#<%=txtAddress.ClientID %>").prop("disabled", true);
            $("#<%=txtPhone.ClientID %>").prop("disabled", true);
            $("#<%=txtEmail.ClientID %>").prop("disabled", true);
            // load data
            $("#customers-dialog-form").dialog("open");
            $('#LoadRecordsButton').click();
        }
    </script>
</asp:Content>
